import { defineComponent, reactive, onMounted, watch, ref } from 'vue'
import * as echarts from 'echarts'

// 定义API返回数据类型接口
interface AdmissionApiData {
  date: string;
  number: number;
}

const PropsType = {
  cdata: {
    type: Object,
    required: true // 修正原代码"require"拼写错误为"required"（TypeScript语法规范）
  }
} as const

export default defineComponent({
  setup() {
    // 初始化响应式数据（初始为空，后续从API填充）
    const cdata = reactive({
      category: [] as string[],
      barData: [] as number[],
      rateData: []
    })

    // 原methods逻辑：计算rateData（与原代码完全一致）
    const setData = () => {
      for (let i = 0; i < cdata.barData.length - 1; i++) {
        const rate = cdata.barData[i];
        cdata.rateData.push(rate.toFixed(2));
      }
    }

    // 新增：调用API获取入院病人数据
    const fetchAdmissionData = async () => {
      try {
        // 发起API请求
        const response = await fetch(
          window.globalConfig.baseApi +'/api/Nurse/GetAllStatisticsDataBRGLJson?IIIDataType=入院病人概览&flag=1'
        );

        // 处理请求失败场景
        if (!response.ok) {
          throw new Error(`API请求失败，状态码：${response.status}`);
        }

        // 解析API返回的JSON数据
        const apiData: AdmissionApiData[] = await response.json();

        // 清空原有数据，避免新旧数据混合
        cdata.category = [];
        cdata.barData = [];
        cdata.rateData = [];

        // 将API数据映射到cdata：date→category，number→barData
        apiData.forEach(item => {
          cdata.category.push(item.date);
          cdata.barData.push(item.number);
        });

        // 数据更新后重新计算rateData（与原逻辑一致）
        setData();

      } catch (error) {
        // 错误捕获与打印（便于调试）
        console.error('获取入院病人概览数据失败：', error);
      }
    }

    // 生命周期：组件挂载后触发API请求（原onMounted逻辑保留，新增API调用）
    onMounted(() => {
      fetchAdmissionData();
    })

    // 图表ref定义（与原代码一致）
    const chartRef = ref()
    let options = {}

    // 监听cdata变化更新图表（图表样式配置与原代码完全一致）
    watch(
      () => cdata,
      (val: any) => {
        // 避免数据未加载时渲染空图表
        if (val.category.length === 0 || val.barData.length === 0) {
          return;
        }

        options = {
          tooltip: {
            trigger: 'axis', // 触发类型：坐标轴触发
            axisPointer: {
              type: 'line' // 指示器类型：直线指示器
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '1%',
            bottom: '1%'
          },
          xAxis: {
            type: 'category',
            data: val.category, // 使用API返回的date作为x轴数据
            show: false // 保留原样式：隐藏x轴
          },
          yAxis: {
            type: 'value',
            show: false, // 保留原样式：隐藏y轴
            splitNumber: 3000
          },
          title: {
            left: 'center',
            text: '', // 保留原样式：空标题
            textStyle: {
              color: '#82D4E2', // 标题颜色
              fontSize: 18, // 标题字体大小
              fontFamily: '幼圆',
              fontStyle: 'italic'
            }
          },
          series: [
            {
              data: val.barData, // 使用API返回的number作为图表数据
              type: 'line',
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' } // 保留原样式：显示最大值标记点
                ]
              },
              smooth: true, // 保留原样式：平滑曲线
              symbol: 'none', // 保留原样式：隐藏数据点
              areaStyle: {
                // 保留原样式：渐变面积颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(0, 70, 131)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(0, 0, 12)'
                  }
                ])
              }
            }
          ]
        }

        // 手动触发图表更新（与原代码一致）
        if (chartRef.value) {
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    // 返回渲染函数（与原代码一致）
    return () => {
      const height = "280px"
      const width = "100%"
      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})